<template>
    <div class="play-bar" :class="{show:!toggle}">
        <div @click="toggle=!toggle" class="item-up" :class="{turn: toggle}">
            <svg class="icon">
                <use xlink:href="#icon-jiantou-xia-cuxiantiao"></use>
            </svg>
        </div>
        <div class="kongjian">
            <!-- 上一首 -->
            <div class="item" @click="prev">
                <svg class="icon">
                    <use xlink:href="#icon-ziyuanldpi"></use>
                </svg>
            </div>
            <!-- 播放 -->
            <div class="item" @click="togglePlay">
                <svg class="icon">
                    <use :xlink:href="playButtonUrl"></use>
                </svg>
            </div>
            <!-- 下一首 -->
            <div class="item" @click="next">
                <svg class="icon">
                    <use xlink:href="#icon-ziyuanldpi1"></use>
                </svg>
            </div>
            <!-- 歌曲图片 -->
            <div class="item-img" @click="toLyric">
                <img :src="picUrl"/>
            </div>
            <!-- 播放进度 -->
            <div class="playing-speed">
                <!-- 播放开始时间 -->
                <div class="current-time">{{nowTime}}</div>
                <div class="progress-box">
                    <div class="item-song-title">
                        <div>{{this.title}}</div>
                        <div>{{this.artist}}</div>
                    </div>
                    <div ref="progress" class="progress" @mousemove="mousemove">
                        <!-- 进度条 -->
                        <div ref="bg" class="bg" @click="updatemove">
                            <div ref="curProgress" class="cur-progress" :style="{width:curLength+'%'}"></div>
                        </div>
                        <!-- 拖动的点点 -->
                        <div ref="idot" class="idot" :style="{left:curLength+'%'}" @mousedown="mousedown"
                             @mouseup="mouseup"></div>
                    </div>
                </div>
                <!-- 播放结束时间 -->
                <div class="left-time">{{songTime}}</div>
                <!-- 音量 -->
                <div class="item item-volume">
                    <svg v-if="volume == 0" class="icon">
                        <use xlink:href="#icon-yinliangjingyinheix"></use>
                    </svg>
                    <svg v-else class="icon">
                        <use xlink:href="#icon-yinliang1"></use>
                    </svg>
                    <el-slider class="volume" v-model="volume" :vertical="true"></el-slider>
                </div>
                <!-- 收藏 -->
                <div class="item" @click="collection">
                    <svg :class="{active:isActive}" class="icon">
                        <use xlink:href="#icon-xihuan-shi"></use>
                    </svg>
                </div>
                <!-- 下载 -->
                <div class="item" @click="download">
                    <svg class="icon">
                        <use xlink:href="#icon-xiazai"></use>
                    </svg>
                </div>
                <!-- 当前播放的歌曲列表 -->
                <div class="item" @click="changeAside">
                    <svg class="icon">
                        <use xlink:href="#icon-liebiao"></use>
                    </svg>
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import {mapGetters} from 'vuex';
    import {Message} from "element-ui";

    export default {
        name: 'play-bar',
        data() {
            return {
                nowTime: '00:00',        //当前播放进度的时间
                songTime: '00:00',        //当前歌曲总时间
                curLength: 0,            //进度条的位置
                progressLength: 0,      //进度条的总长度
                mouseStartX: 0,      //拖拽开始位置
                tag: false,             //拖拽开始结束的标志，当开始拖拽，它的值才会变成true
                volume: 50,             //音量，默认一半
                toggle: true            //显示隐藏播放器页面
            }
        },
        computed: {
            ...mapGetters([
                'id',               //歌曲id
                'url',              //歌曲地址
                'isPlay',           //播放状态
                'playButtonUrl',   //播放状态的图标
                'picUrl',            //正在播放的音乐的图片
                'title',                  //歌名
                'artist',                 //歌手名
                'duration',                //音乐时长
                'curTime',                //当前音乐的播放位置
                'showAside',            //是否显示播放中的歌曲列表
                'listIndex',            //当前歌曲在歌单中的位置
                'listOfSongs',          //当前歌单列表
                'autoNext',             //自动播放下一首
                'loginIn',              //用户是否已登录
                'userId',               //当前登录用户的id
                'isActive',             //当前播放的歌曲是否已收藏
            ])
        },
        watch: {
            //切换播放状态的图标
            isPlay() {
                if (this.isPlay) {
                    this.$store.commit('setPlayButtonUrl', '#icon-zanting');
                } else {
                    this.$store.commit('setPlayButtonUrl', '#icon-bofang');
                }
            },
            curTime() {
                this.nowTime = this.formatSeconds(this.curTime);
                this.songTime = this.formatSeconds(this.duration);
                this.curLength = (this.curTime / this.duration) * 100;
            },
            //音量变化
            volume() {
                this.$store.commit('setVolume', this.volume / 100);
            },
            //自动播放下一首
            autoNext() {
                this.next();
            }
        },
        mounted() {
            this.progressLength = this.$refs.progress.getBoundingClientRect().width;
            document.querySelector('.item-volume').addEventListener('click', function (e) {
                document.querySelector('.volume').classList.add('show-volume');
                e.stopPropagation();
            }, false);
            document.querySelector('.volume').addEventListener('click', function (e) {
                e.stopPropagation();
            }, false);
            document.addEventListener('click', function () {
                document.querySelector('.volume').classList.remove('show-volume');
            }, false);
        },
        methods: {
            //提示信息
            notify(title, type) {
                this.$notify({
                    title: title,
                    type: type
                })
            },
            //控制音乐播放、暂停
            togglePlay() {
                if (this.isPlay) {
                    this.$store.commit('setIsPlay', false);
                } else {
                    this.$store.commit('setIsPlay', true);
                }
            },
            //解析时间
            formatSeconds(value) {
                let theTime = parseInt(value);
                let result = '';    //返回值
                let hour = parseInt(theTime / 3600);    //小时
                let minute = parseInt((theTime / 60) % 60); //分钟
                let second = parseInt(theTime % 60);        //秒
                if (hour > 0) {
                    if (hour < 10) {
                        result = '0' + hour + ":";
                    } else {
                        result = hour + ":";
                    }
                }
                if (minute > 0) {
                    if (minute < 10) {
                        result += "0" + minute + ":";
                    } else {
                        result += minute + ":";
                    }
                } else {
                    result += "00:";
                }
                if (second > 0) {
                    if (second < 10) {
                        result += "0" + second;
                    } else {
                        result += second;
                    }
                } else {
                    result += "00";
                }
                return result;
            },
            //拖拽开始
            mousedown(e) {
                this.mouseStartX = e.clientX;
                this.tag = true;
            },
            //拖拽结束
            mouseup() {
                this.tag = false;
            },
            //拖拽中
            mousemove(e) {
                if (!this.duration) {
                    return false;
                }
                if (this.tag) {
                    let movementX = e.clientX - this.mouseStartX;       //点点移动的距离
                    let curLength = this.$refs.curProgress.getBoundingClientRect().width;
                    let newPercent = ((movementX + curLength) / this.progressLength) * 100;
                    if (newPercent > 100) {
                        newPercent = 100;
                    }
                    this.curLength = newPercent;
                    this.mouseStartX = e.clientX;
                    this.changeTime(newPercent);
                }
            },
            //更改歌曲进度
            changeTime(percent) {
                let newCurTime = (percent * 0.01) * this.duration;
                this.$store.commit('setChangeTime', newCurTime);
            },
            //点击播放条切换播放进度
            updatemove(e) {
                if (!this.tag) {
                    //进度条的左侧坐标
                    let curLength = this.$refs.bg.offsetLeft;
                    let newPercent = ((e.clientX - curLength) / this.progressLength) * 100;
                    if (newPercent > 100) {
                        newPercent = 100;
                    } else if (newPercent < 0) {
                        newPercent = 0;
                    }
                    this.curLength = newPercent;
                    this.changeTime(newPercent);
                }
            },
            //显示播放中的歌曲列表
            changeAside() {
                this.$store.commit('setShowAside', true);
            },
            //上一首
            prev() {
                if (this.listIndex != -1 && this.listOfSongs.length > 1) {    //当前处于不可能状态或者只有只有一首音乐的时候不执行）
                    if (this.listIndex > 0) {                                 //不是第一首音乐
                        this.$store.commit('setListIndex', this.listIndex - 1);  //直接返回上一首
                    } else {                                                  //当前是第一首音乐
                        this.$store.commit('setListIndex', this.listOfSongs.length - 1);  //切换到倒数第一首
                    }
                    this.toplay(this.listOfSongs[this.listIndex].url);
                }
            },
            //下一首
            next() {
                if (this.listIndex != -1 && this.listOfSongs.length > 1) {    //当前处于不可能状态或者只有只有一首音乐的时候不执行）
                    if (this.listIndex < this.listOfSongs.length - 1) {                                 //不是最后一首音乐
                        this.$store.commit('setListIndex', this.listIndex + 1);  //直接返回下一首
                    } else {                                                      //当前是最后一首音乐
                        this.$store.commit('setListIndex', 0);  //切换到第一首
                    }
                    this.toplay(this.listOfSongs[this.listIndex].url);
                }
            },
            //播放音乐
            toplay: function (url) {
                if (url && url != this.url) {
                    this.$store.commit('setId', this.listOfSongs[this.listIndex].id);
                    this.$store.commit('setUrl', url);
                    this.$store.commit('setPicUrl', this.listOfSongs[this.listIndex].pic);
                    this.$store.commit('setTitle', this.replaceFName(this.listOfSongs[this.listIndex].name));
                    this.$store.commit('setArtist', this.replaceLName(this.listOfSongs[this.listIndex].name));
                    this.$store.commit('setLyric', this.parseLyric(this.listOfSongs[this.listIndex].lyric));
                    this.$store.commit('setIsActive', false);
                    if (this.loginIn) {
                        // 添加播放记录 包括歌曲播放记录和该歌曲标签的播放记录
                        this.putRequest('/record/' + this.id)
                        // 判断该用户有没有收藏该播放的歌曲
                        this.getRequest('/user/star/' + this.userId).then(res => {
                            for (let item of res) {
                                if (item.songId == id) {
                                    this.$store.commit('setIsActive', true);
                                    break;
                                }
                            }
                        })
                    }
                }
            },
            //获取名字前半部分--歌手名
            replaceLName(str) {
                let arr = str.split('-');
                return arr[0];
            },
            //获取名字后半部分--歌名
            replaceFName(str) {
                let arr = str.split('-');
                return arr[1];
            },
            //解析歌词
            parseLyric(text) {
                if (text == '[00:00:00]暂无歌词') {
                    return [];
                }
                let lines = text.split("\n");                   //将歌词按行分解成数组
                let pattern = /\[\d{2}:\d{2}.(\d{3}|\d{2})\]/g; //时间格式的正则表达式
                let result = [];                                //返回值
                //对于歌词格式不对的直接返回
                if (!(/\[.+\]/.test(text))) {
                    return [[0, text]]
                }
                //去掉前面格式不正确的行
                while (!pattern.test(lines[0])) {
                    lines = lines.slice(1);
                }
                //去掉后面格式不正确的行
                while (!pattern.test(lines[lines.length - 1])) {
                    lines = lines.slice(0, lines.length - 1)
                }
                //遍历每一行，形成一个每行带着俩元素的数组，第一个元素是以秒为计算单位的时间，第二个元素是歌词
                for (let item of lines) {
                    let time = item.match(pattern);  //存前面的时间段
                    let value = item.replace(pattern, '');//存后面的歌词
                    for (let item1 of time) {
                        let t = item1.slice(1, -1).split(":");   //取出时间，换算成数组
                        if (value != '') {
                            result.push([parseInt(t[0], 10) * 60 + parseFloat(t[1]), value]);
                        }
                    }
                }
                //按照第一个元素--时间--排序
                result.sort(function (a, b) {
                    return a[0] - b[0];
                });
                return result;
            },
            //转向歌词页面
            toLyric() {
                this.$router.push({path: `/lyric`});
            },
            //下载音乐
            download() {
                console.log(this.url);
                window.open(this.url,'_parent')
                // window.open('/user/song/download/' + this.id, '_parent')

                // this.downloadMusic(this.url)
                //   .then(res => {
                //     console.log(this.url);
                //     let content = res.data;
                //     let eleLink = document.createElement('a');
                //     var idx = this.url.lastIndexOf('.');
                //     var suf = this.url.space(idx);
                //     console.log(space)
                //     eleLink.download = `${this.artist}-${this.title}`+suf;
                //     eleLink.style.display = 'none';
                //     //把字符内容转换成blob地址
                //     let blob = new Blob([content]);
                //     eleLink.href = URL.createObjectURL(blob);
                //     //把链接地址加到document里
                //     document.body.appendChild(eleLink);
                //     //触发点击
                //     eleLink.click();
                //     //然后移除掉这个新加的控件
                //     document.body.removeChild(eleLink);
                //   })
                //   .catch(err => {
                //     console.log(err);
                //   })

                // const blob = new Blob([this.url], {//this.detailinfo是后台返回给前台的文档下载链接
                //     type: "multipart/form-data",
                // });
                // const objectUrl = URL.createObjectURL(blob);
                // const link = document.createElement("a"); //我们用模拟q标签点击事件
                // const fname = 'aaa.flac' //下载文件的名字
                // link.href = objectUrl;
                // link.setAttribute("download", fname);
                // document.body.appendChild(link);
                // link.click(); //点击
                // document.body.removeChild(link); // 下载完成移除元素
                // window.URL.revokeObjectURL(URL); // 释放掉blob对象

            },
            //收藏
            collection() {
                if (this.loginIn) {
                    var params = {}
                    // params['']=
                    params['userId'] = this.userId
                    params['type'] = 0
                    params['songId'] = this.id
                    this.postRequest('/user/star/', params).then(resp => {
                        if (resp) {
                            this.$store.commit('setIsActive', true);
                        }
                    })
                    // var params = new URLSearchParams();
                    // params.append('userId', this.userId);
                    // params.append('type', 0);
                    // params.append('songId', this.id);
                    // setCollect(params)
                    //   .then(res => {
                    //     if (res.code == 1) {
                    //       this.$store.commit('setIsActive', true);
                    //       this.notify('收藏成功', 'success');
                    //     } else if (res.code == 2) {
                    //       this.notify('已收藏', 'warning');
                    //     } else {
                    //       this.notify('收藏失败', 'error');
                    //     }
                    //   })
                } else {
                    Message.warning("请先登录")
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../assets/css/play-bar.scss';
    @import '../assets/css/index.scss';
</style>
